import { JSX } from 'react'

export function Banner() :JSX.Element {
    return (
        <div className={'bg-slate-300 p-20 '}>
            <div className={'max-w-7xl mx-auto font-serif'}>
                <h1 className={'text-center text-5xl'}>Tailwind</h1>
                <h2 className={'text-center text-2xl mt-5'}>
                    Tailwind CSS v4.0 is an all-new version of the
                    <span className={'text-cyan-300 mx-2'}>framework</span>
                    optimized for performance and flexibility, with a reimagined configuration and customization experience, and taking full advantage of the latest advancements the web platform has to offer.
                </h2>
                <p className={'text-center my-8'}>
                    <button className={'bg-blue-700 cursor-pointer text-white text-4xl py-3 px-6 hover:shadow-lg'}>按钮</button>
                </p>
            </div>
        </div>
    )
}
